<template>
    <v-chart class="chart" :option="option" />
</template>

<script>
import "echarts/lib/chart/line"
import "echarts/lib/chart/bar"
import "echarts/lib/chart/pie"

import "echarts/lib/component/title" //标题
import "echarts/lib/component/tooltip" //提示框

Vue.config.productionTip = false
import VChart from 'vue-echarts'
import Vue from 'vue'

Vue.use(VChart)

export default {
    components: {
        'v-chart':VChart
    },
    data(){
        return {
            option: {
                title: {
                    text: '西安一周天气情况'
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [7, 12, 18, 20, 7, 18, 20],
                    type: 'line',
                    areaStyle: {}
                }]
            }
        }
    },
    mounted(){
        this.$http.get("/charts").then(
            res=>{
                if(res.status == 200){
                    const dataList = res.data.list;
                    console.log(res.data.list)
                    const x_itme = [];
                    const y_itme = [];
                    for(let index in dataList){
                        x_itme.push(dataList[index].month+"月")
                        y_itme.push(dataList[index].total)
                    }
                    this.option.xAxis.data = x_itme
                    this.option.series[0].data = y_itme                    
                }
            }
        )
    },
}
</script>

<style>
.chart{
    width: 100%;
    height: 400px;
}
</style>